<template>
  <div>
    <el-row>
      <el-col span="3">
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            style="height: 89.8vh"
            active-text-color="#ffd04b">
          <el-menu-item index="1" @click="changeUserManage(1)">
            <i class="el-icon-menu"></i>
            <span slot="title" >编辑用户信息</span>
          </el-menu-item>
          <el-menu-item index="2"  @click="changeUserManage(2)" >
            <i class="el-icon-menu"></i>
            <span slot="title">删除用户</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col span="21">
        <el-card shadow="always">
          <el-table
              v-loading="loading"
              :data="tableData"
              style="left: 25px;width: 100%">
            <el-table-column
                prop="id"
                label="UID"
                width="180">
            </el-table-column>
            <el-table-column
                prop="userName"
                label="用户名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="manage"
                label="操作">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="primary"
                    v-if="elMenuIndex===1"
                    @click="dialogFormVisible=true;handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    v-if="elMenuIndex===2"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

      </el-col>
    </el-row>
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">

      <h3>输入新用户名</h3>
      <el-input v-model="newUserName"></el-input>
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUserName(clickingUserId,newUserName);dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tableData: [],
      loading: true,
      elMenuIndex:1,
      dialogFormVisible: false,
      newUserName:'',
      clickingUserId:-1
    }

  },
  methods:{
    getAllUser(){
      axios.post("/hkgapi/user/getAllUser").then(res=>{
        this.tableData=res.data;
        this.loading=false;
      })
    },
    handleEdit(index,row){
      this.clickingUserId=row.id;
      this.newUserName=row.userName
    },
    handleDelete(index,row){
      this.clickingUserId=row.id;
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteUserById(this.clickingUserId)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    updateUserName(id,newUserName){
      axios.post("/hkgapi/user/updateUserNameById",{
        id:id,
        newUserName:newUserName
      }).then(res=>{
        if(res.data.code===0){
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'success'
          });
        }else{
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          });
        }

        this.loading=true;
        this.getAllUser()

      }).catch(error=>{
        this.$message({
          showClose: true,
          message: error,
          type: 'error'
        });
      })
    },
    deleteUserById(id){
      axios.post("/hkgapi/user/deleteUserById",{
        id:id,
        newUserName:this.newUserName
      }).then(res=>{
        if(res.data.code===0){
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'success'
          });
        }else{
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          });
        }
        this.loading=true;
        this.getAllUser()
      }).catch(error=>{
        this.$message({
          showClose: true,
          message: error,
          type: 'error'
        });
      })
    },
    changeUserManage(index){
      this.elMenuIndex=index
    }
  },
  mounted() {
    this.getAllUser()
  }
}
</script>